@import "@automattic/typography/styles/variables";

$font-sf-pro-display: "SF Pro Display", $sans;
$font-sf-pro-text: "SF Pro Text", $sans;
$empty-text-color-derker: var(--color-neutral-80);
$empty-text-color-lighter: var(--color-neutral-40);

.stats__empty-state {
	.empty-state-card {
		display: flex;
		padding: 24px;
		min-width: 320px;
		margin: 0;
		background-color: rgba(255, 255, 255, 0.85);
		border-radius: 4px;

		&__icon {
			flex-shrink: 0;
			margin-right: 20px;
			align-self: center;
			color: $empty-text-color-derker;
		}


		&__content {
			flex-grow: 1;
		}

		.empty-state-card-heading {
			font-family: $font-sf-pro-display;
			font-weight: 600;
			color: $empty-text-color-derker;
			margin-bottom: 8px;
		}

		.empty-state-card-info {
			font-family: $font-sf-pro-text;
			font-size: $font-body-small;
			color: $empty-text-color-lighter;
		}
	}
}
